<style scoped>
.toolbal {
  width: 100%;
  margin: 16px 0 0 16px;
  padding: 12px 10px;
  border-radius: 2px;
  background-color: #fff;
}
</style>

<template>
  <div>
    <div class="toolbal">
      <ASpace>
        <Authority :value="'view.add'">
          <AButton type="primary" size="small" @click="addView">新增菜单</AButton>
        </Authority>
        <Authority :value="'view.del'">
          <AButton size="small" type="danger" @click="delView">删除菜单</AButton>
        </Authority>
        <!-- <AButton size="small" type="primary" @click="importView">导入菜单</AButton> -->
      </ASpace>
    </div>
    <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
      <MenuTree class="w-1/4 xl:w-1/5" @select="handleSelect" v-model="refreshMenuTree" @check="handleCheck" />
      <MenuEdit :value="viewModel" class="w-2/4 xl:w-3/5" @success="handleSuccess" />
      <PremCodeList v-model="viewId" class="w-1/4 xl:w-1/5" />
    </PageWrapper>
  </div>
</template>
<script lang="ts" setup>
import { unref, ref, computed } from 'vue';
import { Authority } from '/@/components/Authority';
import MenuEdit from './MenuEdit.vue';
import MenuTree from './MenuTree.vue';
import PremCodeList from './PremCodeList.vue';
import { PageWrapper } from '/@/components/Page';
import { removeView } from '/@/api/system/view'
import { useMessage } from '/@/hooks/web/useMessage';

const refreshMenuTree = ref(false);
const viewModel = ref<Recordable>({})
const viewIds = ref<number[]>([])
const viewId = computed(() => unref(viewModel).id ?? 0);
const { notification } = useMessage();

function handleCheck(keys: number[]) {
  viewIds.value = keys;
}
function handleSelect(record: Recordable) {
  viewModel.value = { ...record }
}
function handleSuccess() {
  refreshMenuTree.value = true
}

function addView() {
  viewModel.value = {}
}
async function delView() {
  await removeView(unref(viewIds));
  refreshMenuTree.value = true
  notification.success({ message: '删除成功' })
}
</script>
